<html>
    <head>
        <title>3D方块</title>
        <meta charset="utf-8">
        <style>
            body{
                height:100%;
                background: radial-gradient(circle,rgb(255, 38, 0),black,black);
                margin: 0;
                /*  弹性布局*/
                display: flex;
                justify-content: center;
                align-items: center;
                /* 3D画面视角距离 */
                perspective:2000px;
            }

            @keyframes spin{
                0%{
                    transform:rotateX(0) rotateY(0) rotateZ(0);
                }
                100%{
                    transform:rotateX(1080deg) rotateY(720deg) rotateZ(720deg);
                }
            }
            #container{
                width: 300px;
                height: 300px;
                /* border: solid 1px red; */
                /* 当元素放生3d变形时，子元素也保持变形效果 */
                transform-style: preserve-3d; 
                animation-name: spin ;
                animation-duration: 10000ms;
                animation-iteration-count:infinite;
                animation-timing-function:linear;

            }
            /*     为页面中class值包含pic值得元素设置样式    */
            .pic{
                width: 300px;
                height:300px;
                position: absolute;
            }
            /* 先平移再转动 */
            #front{
                transform:translateZ(150px);
            }
            #back{
                transform:translateZ(-150px);
            }
            #top{
                transform: translateY(-150px) rotateX(90deg);
            }
            #bottom{
                transform: translateY(150px) rotateX(90deg);
            }
            #left{
                transform: translateX(-150px) rotateY(90deg)
            }
            #right{
                transform: translateX(150px) rotateY(90deg)
            }
        
        
        
        
        </style>
    </head>
    <body>
        <div id="container">
            <!--   img.pic[src=$.jpg]*6     tab -->
            <img src="1.jpg" alt="" class="pic" id="front">
            <img src="2.jpg" alt="" class="pic" id="back">
            <img src="3.jpg" alt="" class="pic" id="top">
            <img src="4.jpg" alt="" class="pic" id="bottom">
            <img src="5.jpg" alt="" class="pic" id="left">
            <img src="6.jpg" alt="" class="pic" id="right">
        </div>
    </body>
</html>